<template>
  <div style="height: 100%" class="workspace">
    <el-container ref="listWarp" style="height: 100%; background-color: #fff">
      <el-header style="height:45px;display: flex;align-items: center;justify-content: space-between;padding: 0 20px;">
        <el-date-picker
                v-model="dateVal"
                type="date"
                size="small"
                value-format="yyyy-MM-dd"
                @change="evtChangeDate"
                placeholder="选择日期">
        </el-date-picker>

        <div>
          <ToolButton :disabled="button.disabled" :icon="button.icon" :key="button.text" :left-line="button.leftLine" :right-line="button.rightLine" :text="button.text" :title="button.title" @buttonClick="toolButtonClick" v-for="button in toolButtons" style="margin-top:0;margin-right: 10px;" />
        </div>

      </el-header>
      <el-main style="height: 100%;">
        <div style="text-align: center;line-height: 60px;font-size: 20px;">
                 <span style="margin-right: 50px">{{showDate}} </span>公寓安全数据报表
        </div>
        <div class="content" style="height:calc(100% - 60px);">
          <el-table :data="tableData" height="100%" style="width: 100%;" border v-loading="loadIng" :default-sort="{prop: 'passTime', order: 'descending'}" @sort-change="changeTableSort">
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column prop="name" label="学院名称"></el-table-column>
            <el-table-column prop="lateIn" label="晚归人数" width="140" align="center">
                 <template slot-scope="scope">
                     <span style="cursor: pointer;color: #409EFF" @click="funGetRowDetail('lateIn',scope.row)">{{scope.row.lateIn}}</span>
                 </template>
            </el-table-column>
            <el-table-column prop="lateOut" label="晚出人数" width="140" align="center">
              <template slot-scope="scope">
                <span style="cursor: pointer;color: #409EFF" @click="funGetRowDetail('lateOut',scope.row)">{{scope.row.lateOut}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="notBack" label="未归人数" width="140" align="center">
              <template slot-scope="scope">
                <span style="cursor: pointer;color: #409EFF" @click="funGetRowDetail('notBack',scope.row)">{{scope.row.notBack}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="preOut" label="未出预警人数"width="160" align="center">
              <template slot-scope="scope">
                <span style="cursor: pointer;color: #409EFF" @click="funGetRowDetail('preOut',scope.row)">{{scope.row.preOut}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="preIn" label="未归预警人数" width="160px" align="center">
              <template slot-scope="scope">
                <span style="cursor: pointer;color: #409EFF" @click="funGetRowDetail('preIn',scope.row)">{{scope.row.preIn}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>
    <!--导出-->
    <export-excel ref="exportExcel" :sheet-name="sheetName" :file-name="exportFileName"  extend="export" :columns="columns" :rows="totalRows" :query="searchObj" :export-api="exportApi" :isPerSon="false"/>
    <!--详情-->
    <college-detail ref="collegeDetail"></college-detail>
  </div>
</template>
<script>
import { apiLateRecord } from "@/api/basicData/lateRecord";
import ToolButton from "@/itsoftUI/components/toolbar/toolbutton";
import exportExcel from "@/itsoftUI/components/exportExcel/safetyExportExcel";
import { getPremission } from "@/itsoftUI/auth/permission";
import  {ItSoftDateUtil} from "@/itsoftUI/utils/ItSoftDateUtil"
import  collegeDetail from  "./collegeDetail"
export default {
  components: {ToolButton,exportExcel,collegeDetail},
  data() {
    return {
      loading: false,
      dateVal:ItSoftDateUtil.dateFormat(new Date(),"yyyy-MM-dd"),
      showDate:ItSoftDateUtil.dateFormat(new Date(),"yyyy年MM月dd日"),
      toolButtons: [{
        text: "导出",
        auth: "070201",
        icon: "daochu",
      }],
      exportFileName: "学院安全报表",
      sheetName: "学院安全报表",
      exportApi: apiLateRecord.countSafety,
      searchObj:{},
      totalRows:2,
      columns: [{
              prop: "name",
              label: "学院名称",
          },{
              prop: "lateIn",
              label: "晚归人数",
          },{
              prop: "lateOut",
              label: "晚出人数",
          },{
              prop: "notBack",
              label: "未归人数",
          },{
              prop: "preOut",
              label: "未出预警人数",
          },{
              prop: "preIn",
              label: "未归预警人数",
          }
      ],
      tableData: [],

    };
  },
  methods: {
    toolButtonClick(val){
      switch (val) {
        case "导出":
          this.$refs.exportExcel.exportOpen();
        break;
      }
    },
    evtChangeDate(){
         this.showDate = ItSoftDateUtil.dateFormat(new Date(this.dateVal),"yyyy年MM月dd日");
         this.getDataList();
    },
    getDataList(){
       this.loading = true;
       this.searchObj = {
             times:this.dateVal,
             type:"college"
       };
       this.sheetName = this.showDate+"   学院安全报表";
       this.exportFileName = this.showDate+"   学院安全报表";
      apiLateRecord.countSafety(this.dateVal,"college").then(res=>{
               if(res.errorCode == 0){
                   this.tableData = res.data;
               }
               this.loading = false
       }).catch(()=>{
               this.loading = false;
       })
    },
    funGetRowDetail(val,row){
         this.$refs.collegeDetail.dialogVisible  =true;
         this.$refs.collegeDetail.moduleName = val;
         this.$refs.collegeDetail.manageCollegeId = row.id;
         this.$refs.collegeDetail.dateVal = this.dateVal;
         this.$refs.collegeDetail.funGetTabData();
    },

  },
  created() {
    getPremission(this.toolButtons);
    this.getDataList();
  },
};
</script>
<style scoped>
.colTitle {
  display: inline-block;
  line-height: 34px;
  margin-right: 10px;
}
</style>